<template>
  <div>
    <el-row>
      <el-col :span="24" style="height: 60px">
        <div>
          <el-form :inline="true" :model="ruleForm" ref="ruleForm" label-width="80px" class="demo-form-inline">
            <el-form-item label="讲师名称" prop="lecturerUserName">
              <el-input v-model="ruleForm.lecturerUserName" placeholder="讲师名称"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="lecturerPhone">
              <el-input v-model="ruleForm.lecturerPhone" placeholder="手机号" style="height: 30px"></el-input>
            </el-form-item>
            <el-form-item label="审核状态" prop="auditStatus">
              <el-select clearable v-model="ruleForm.auditStatus" placeholder="状态">
                <el-option label="待审核" value="0"></el-option>
                <el-option label="审核通过" value="1"></el-option>
                <el-option label="审核不通过" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm()">查询</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
             <!-- <el-button @click="addTeacher()">添加教师</el-button>-->
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="id"
              label="序号"
              width="50">
            </el-table-column>
            <el-table-column
              prop="lecturerPhone"
              label="手机号"
              width="180px"
            >
              <template slot-scope="scope">
                <el-button @click="information(scope.$index, scope.row)" type="text">{{scope.row.lecturerPhone}}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
              prop="lecturerUserName"
              label="讲师名称"
              width="240"
            >
            </el-table-column>
            <el-table-column
              prop="lecturerEmail"
              label="邮箱"
              width="240"
            >
            </el-table-column>

            <el-table-column
              prop="auditStatus"
              label="审核状态"
              width="150"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.auditStatus=='0'">
                  待审核
                </div>
                <div v-else-if="scope.row.auditStatus=='1'">
                  审核通过
                </div>
                <div v-else>
                  审核不通过
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">修改
                </el-button>
                <el-button v-if="scope.row.auditStatus==0 || scope.row.auditStatus==2"
                  size="mini"
                  type="danger"
                  @click="setDivided(scope.$index, scope.row)">审核
                </el-button>
                <el-button v-else disabled
                           size="mini" plain
                           type="info"
                           @click="setDivided(scope.$index, scope.row)">审核
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div>
          <el-dialog
            :title="informationTitle"
            :visible.sync="informationStu"
            width="60%" style="text-align: left"
          >
            <el-card class="box-card" style="text-align: center">
              <div slot="header">
                <span>讲师个人信息</span>
              </div>
              <el-form label-position="left" :model="informationTable" :inline="true" size="medium"
                       class="demo-form-inline">
                <el-form-item label="头像:">
                  <div style="width: 228px">
                    <el-image
                      style="width: 100px; height: 100px;position: absolute"
                      :src="informationTable.headImageUrl"
                      fit="fill"></el-image>
                  </div>
                </el-form-item>

                <el-form-item label="讲师编号:">
                  <div style="width: 200px">
                    {{informationTable.lecturer_id}}
                  </div>
                </el-form-item>
                <el-form-item label="">
                  <div style="width: 200px"></div>
                </el-form-item>
                <el-form-item label="">
                  <div style="width: 268px"></div>
                </el-form-item>
                <el-form-item label="讲师名称:">
                  <div style="width: 200px">
                    {{informationTable.lecturerUserName}}
                  </div>
                </el-form-item>
                <el-form-item label="状态:">
                  <div style="width: 200px">
                    <div v-if="informationTable.auditStatus === 0">
                      未审核
                    </div>
                    <div v-else-if="informationTable.auditStatus === 1">
                      待审核
                    </div>
                    <div v-else>
                      审核通过
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="手机号:">
                  <div style="width: 210px">
                    {{informationTable.lecturerPhone}}
                  </div>
                </el-form-item>
                <el-form-item label="邮箱:">
                  <div style="width: 220px">
                    {{informationTable.lecturerEmail}}
                  </div>
                </el-form-item>
                <el-form-item label="职位:">
                  <div style="width: 220px">
                    {{informationTable.position}}
                  </div>
                </el-form-item>
                <el-form-item label="注册时间:">
                  <div style="width: 200px">
                    {{informationTable.gmtCreate}}
                  </div>
                </el-form-item>
              </el-form>
            </el-card>
            <el-card class="box-card" style="text-align: center">
              <div slot="header" class="clearfix">
                <span>简介</span>
              </div>
              <div>
                {{informationTable.introduce}}
              </div>
            </el-card>
          </el-dialog>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div>
          <el-dialog
            :title="updateTitle"
            :visible.sync="updateStu"
            width="60%" style="text-align: left"
          >

            <el-card class="box-card">
              <div slot="header" style="text-align: left">
                <span>讲师个人信息</span>
              </div>
              <div>
                <el-form id="update" :inline="true" label-position="right" label-width="100px" :model="updateTable"
                         size="medium">
                  <el-form-item label="手机号:">
                    <el-input v-model="updateTable.lecturerUserName" placeholder="手机号" disabled></el-input>
                  </el-form-item>
                  <el-form-item label="讲师名称:">
                    <el-input v-model="updateTable.uname" placeholder="讲师名称"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱:">
                    <el-input v-model="updateTable.lecturerEmail" placeholder="邮箱"></el-input>
                  </el-form-item>
                  <el-form-item label="讲师简介">
                    <el-input style="width: 600px" type="textarea" v-model="updateTable.introduce"></el-input>
                  </el-form-item>
                  <el-form-item style="float: right">
                    <el-button type="primary" @click="updateteacher()" size="mini">修改</el-button>
                    <el-button @click="updateStu=false" type="danger" size="mini">取消</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-card>

          </el-dialog>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <div>
          <el-dialog
            :title="divideTitle"
            :visible.sync="divideStu"
            width="30%" style="text-align: left;">
            <div style="height: 200px">
              <el-form label-position="right" label-width="100px" :model="divideTable"
                       size="medium">
                <el-form-item label="审核结果">
                  <el-radio-group style="margin: 10px" v-model="divideTable.auditStatus">
                    <el-radio :label="1">通过</el-radio>
                    <el-radio :label="2">不通过</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="审核意见:">
                  <el-input type="textarea" v-model="divideTable.auditOpinion" placeholder="审核意见"></el-input>
                </el-form-item>
                <el-form-item style="float: right">
                  <el-button type="primary" @click="updatedivide()" size="mini">修改</el-button>
                  <el-button @click="divideStu=false" type="danger" size="mini">取消</el-button>
                </el-form-item>
              </el-form>
            </div>


          </el-dialog>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div style="float: right">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="ruleForm.current"
            :page-sizes="[2, 4, 10, 20]"
            :page-size="ruleForm.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

  </div>

</template>

<script>
  import qs from "qs"


  export default {
    name: "teacherAudit",
    inject: ['reload'],
    data() {
      var validateemail = (rule, value, callback) => {
        var MobileRegex = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
        if (value === '') {
          callback(new Error('请输入邮箱'));
        } else if (!MobileRegex.test(value)) {
          callback(new Error('邮箱格式不正确!'));
        } else {
          callback();
        }
      };
      return {
        jiaoyanBtn: true,
        checkBtn: false,
        showow: false,
        addForm: {
          lecturerUserName: '',
          lecturerPhone: '',
          lecturerEmail: ''
        },
        rules: {
          lecturerUserName: [
            {required: true, message: '请输入教师名称', trigger: 'blur'},
          ],
          lecturerPhone: [
            {required: true, message: '请输入手机号码', trigger: 'blur'},
            {pattern: /^1[34578]\d{9}$/, message: '格式错误', trigger: 'blur'}
          ],
          lecturerEmail: [
            {required: true, message: '请输入邮箱', trigger: 'blur'},
            {validator: validateemail, trigger: "blur"}
          ],
        },
        addDialogStu: false,
        divideTable:'',
        divideStu: false,
        divideTitle: '',
        updateTable: '',

        updateStu: false,
        updateTitle: '',
        informationTitle: '',
        informationTable: [],
        informationStu: false,
        ruleForm: {
          lecturerUserName: "",
          lecturerPhone: "",
          auditStatus: "",
          current: 1,
          size: 10,
        },
        total: 1,
        tableData: [],
        shen:{}
      }
    },
    methods: {
      jiaoyan() {
        this.$refs.addForm.validateField('uphone', (phoneError) => {
          if (!phoneError) {
            alert('正确!');
            this.showow = true;
            this.checkBtn = true;
            this.jiaoyanBtn = false;
          } else {
            alert("手机号格式错误")
            this.showow = false;
            this.checkBtn = false;
            this.jiaoyanBtn = true;
            return false;
          }
        });
      },

      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        // this.ruleForm.current=r.data.current;
        this.ruleForm.size = val;
        this.submitForm();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.ruleForm.current = val;
        // this.ruleForm.size=r.data.size;
        this.submitForm();
      },
      submitForm() {

        this.$axios.post("/student/stu/lecturer-audit/findAll", qs.stringify(this.ruleForm)).then(r => {
          console.log(r.data.records)
          this.tableData = r.data.records;
          this.total = r.data.total;
          this.ruleForm.current = r.data.current;
          this.ruleForm.size = r.data.size;
         // alert(JSON.stringify(this.divideTable))
        })
      },
       resetForm(formName) {
        // this.$refs[formName].resetFields();
        this.reload();
       },
      /*修改按钮*/
      handleEdit(index, row) {
        console.log(index, row);
        this.updateStu = true;
        this.updateTitle = row.lecturerUserName + '---信息修改';
       // console.log(index, row);
        this.updateTable = row;
        this.updateTable.lecturerId=row.lecturer_id;
      },
      setDivided(index, row) {
        console.log(index, row);
       /* if (row.auditStatus=="1") {
          alert("审核已通过")

        }*/
        this.divideStu = true;
        this.divideTitle = row.lecturerUserName + '---审核';
        //console.log(index, row);
        this.divideTable = row;

      },
      information(index, row) {
        this.informationStu = true;
        this.informationTitle = row.lecturerUserName + '---信息查看';
        //console.log(index, row);
        this.informationTable = row;
      },
      updateteacher() {
        //alert(JSON.stringify(this.updateTable))
       //console.log(this.updateTable)
        this.$axios.post("/student/stu/lecturer-audit/upd",qs.stringify(this.updateTable)).then(r => {
         // alert(JSON.stringify(r.data.records));
          if (r.data == true) {
            alert("修改成功");
            this.submitForm();
          } else {
            alert("修改失败");
            this.submitForm();
          }
          this.updateStu = false;
        })
      },
      updatedivide(){
     //审核通过向教师表中添加数据
        if (this.divideTable.auditStatus=="1"){
          // this.divideTable.forEach(r=>{
          //   this.divideTable=r
          // });
         // alert(JSON.stringify(this.divideTable.lecturerUserName));
          this.$axios.post("/student/stu/lecturer-audit/addTeacher",qs.stringify(this.divideTable)).then(r=>{
            //alert(JSON.stringify(this.divideTable))
                if (r.data==true) {
                //  alert("111111111")

                }
          })
          /*this.$axios2.get("student/stu/lecturer-audit/updUser1?uid="+this.divideTable.UserId).then(r=>{

          })*/

        }
     this.$axios.post("/student/stu/lecturer-audit/shen",qs.stringify(this.divideTable)).then(r => {
          if (r.data == true) {
         //   alert(this.divideTable.auditStatus);
              this.$message({
                type:'warning',
                message:"审核成功"
              })
          }
          this.divideStu = false;
        })
      },
    },
    created() {
      this.submitForm();
    }
  }
</script>

<style>
  .el-form--inline .el-form-item {
    margin: 15px 0px;
  }

  .el-form--inline .el-form-item__label {
    font-weight: bold;
  }

  .el-form {
    text-align: left;
  }

  .el-form-item .el-form-item--medium {
    line-height: 50px;
    height: 50px;
  }

  .el-card {
    margin: 10px 0px;
  }

  #update .el-form-item {
    margin: 15px 20px;
  }
</style>

